<template>
  <div class="content">
    <div class="content-left">
      <div
        v-for="(item, index) in data.picArray"
        :key="index"
        style="box-sizing: border-box"
      >
        <el-image
          class="content-left-item"
          draggable="true"
          @dragstart="(e) => dragStart(e, item)"
          :src="item.url"
          :alt="item.name"
          style="width: 276px; height: 200px"
          fit="cover"
        ></el-image>
      </div>
    </div>
    <div class="content-right">
      <div class="content-right-item">11</div>
      <div style="width: 46%"></div>
      <div class="content-right-item">14</div>
      <div class="content-right-item">21</div>
      <div style="width: 46%"></div>
      <div class="content-right-item">24</div>
      <div class="content-right-item">31</div>
      <div class="content-right-item">32</div>
      <div class="content-right-item">33</div>
      <div class="content-right-item">34</div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
const data = reactive({
  picArray: [
    {
      id: 1,
      url: "https://img2.baidu.com/it/u=4154064459,885726595&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500",
      name: "pic1",
    },
    {
      id: 2,
      url: "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0529%2Ff5334bebj00qtulpg002wc000u00190m.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
      name: "pic2",
    },
    {
      id: 3,
      url: "https://nimg.ws.126.net/?url=https://dingyue.ws.126.net/2020/0505/38a5694ep00q9uc7u00g9d200ip00brg00ip00br.png&thumbnail=650x2147483647&quality=80&type=jpg",
      name: "pic3",
    },
    {
      id: 4,
      url: "https://img0.baidu.com/it/u=2114472505,714670413&fm=253&fmt=auto&app=138&f=JPEG?w=607&h=404",
      name: "pic1",
    },
  ],
  rightItemArray:[],
  dragItem:null
});

onMounted(() => {
  data.rightItemArray = document.getElementsByClassName("content-right-item");
  if (data.rightItemArray && data.rightItemArray.length > 0) {
    for (let i = 0; i < data.rightItemArray.length; i++) {
      console.log(666, data.rightItemArray[i]);
      data.rightItemArray[i].addEventListener("dragenter", function (e) {
        console.log(111, "dragenter事件触发", e);
      });
	  data.rightItemArray[i].addEventListener("dragover", function (e) {
		e.preventDefault();
      });
      data.rightItemArray[i].addEventListener("drop", function (e) {	
		data.rightItemArray[i].choosedId = data.dragItem.id;
		e.target.style.backgroundImage = `url(${data.dragItem.url})`;
		e.target.style.backgroundSize = "cover";		
      });
    }
  }
});

const dragStart = (e, item) => {
  console.log(333, e, item);
  data.dragItem = item;
  //更改鼠标样式move
};
</script>

<style lang="scss" scoped>

/* 定义关键帧动画 */
@keyframes hover-shake {
  // 0%, 100% {
  //   transform: translateX(0);
  // }
  // 10%, 30%, 50%, 70%, 90% {
  //   transform: translateX(-5px);
  // }
  // 20%, 40%, 60%, 80% {
  //   transform: translateX(5px);
  // }
  0%,10%,20%, 30%, 40%, 60%, 70%, 80%, 90%, 100% {
    transform: rotate(0deg);
  }
  5%{
    transform: rotate(-8deg);
  }
  15% {
    transform: rotate(7deg);
  }
  25% {
    transform: rotate(-6deg);
  }
  35% {
    transform: rotate(5deg);
  }
  45% {
    transform: rotate(-4deg);
  }
  55% {
    transform: rotate(3deg);
  }
  65% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(2deg);
  }
  85% {
    transform: rotate(-1deg);
  }
  95% {
    transform: rotate(1deg);
  }
}

.content {
  width: 100%;
  height: calc(100vh - 155px);
  display: flex;
  &-left {
    width: 300px;
    height: 100%;
    margin-right: 30px;
    overflow-y: auto;
    padding-top: 5px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    text-align: center;
    &-item {
      // border: 3px solid transparent;
      margin-bottom: 10px;
      box-shadow: 0 0 0 3px transparent; 
      // transition: all 0.3s ease; 
      &:hover {
        // border: 3px solid #5a8bbd;
        animation: hover-shake 0.3s ease-in-out; /* 动画名称、持续时间、速度曲线、循环次数 */
        box-shadow: 0 0 0 3px #5a8bbd; 
        cursor: move;
      }
    }
  }
  &-right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1%;
    &-item {
      width: 22%;
      background-color: white;
      border: 3px solid #f5f5f5;
    }
  }
}
</style>
